<template>
	<div class="video-swiper">
		<div class="bg">
			<image class="img" mode='aspectFill' src="imgSrc"></image>
		</div>
		<swiper :indicator-dots="false" :duration="500" @change="slide" circular vertical class="my-swiper">
			<swiper-item v-for="(item, index) in list" :key="index">
				<video class="my-video" id="myVideo" :src="videoSrc" :loop="true" :poster="item.resim" autoplay
					:controls="false"></video>
			</swiper-item>
		</swiper>
	</div>
</template>

<script>
	import {
		getAliyun
	} from '@/api/douyin.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				videoSrc: '',
				imgSrc: '',
				current: 0,
			}
		},
		mounted() {
			this.src_init()
		},
		methods: {
			src_init() {
				this.setSrc()
			},
			async setSrc() {
				this.imgSrc = this.list[this.current].resim
				this.videoSrc = await getAliyun(this.list[this.current].url)
			},
			slide(e) {
				// console.log(e.detail.current);
				this.current = e.detail.current
				this.setSrc()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.video-swiper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.bg {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;
			filter: blur(1px);
		}

		.my-swiper {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index: 4;
			background-color: rgba(0, 0, 0, .2);

			.my-video {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>